<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-row type="flex" justify="space-between">
          <!-- 添加分类按钮 -->
          <el-col :span="6">
            <el-button
              type="primary"
              size="small"
              @click="showDialog = true"
            >添加分类</el-button>
          </el-col>
          <!-- 搜索框 -->
          <el-col :span="12">
            <el-input v-model="keyword" size="small" placeholder="请输入关键词">
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchFn"
              />
            </el-input>
          </el-col>
        </el-row>
        <!-- 分割线 -->
        <el-divider />
        <!-- 表格 :header-cell-style表头内容居中 cell-style表单内容居中 -->
        <el-table
          :data="categoryList"
          border
          style="width: 100%"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column prop="image" label="图片" width="180">
            <template slot-scope="{ row }">
              <img :src="row.image" alt="" class="picture">
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" width="180" />
          <el-table-column prop="desc" label="介绍" />
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button
                size="small"
                type="primary"
                @click="editFn(row.id)"
              >编辑</el-button>
              <el-button
                size="small"
                type="danger"
                @click="delFn(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分割线-->
        <el-divider />
        <!-- 分页器 pagination 组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            small
            layout="prev, pager, next"
            :total="total"
            :page-size="pagesize"
            :current-page="page"
            @current-change="currentChangeFn"
          />
        </el-row>
      </el-card>

      <!-- 添加分类弹窗  @updateList="getCategory"子组件刷新页面 -->
      <categoryEdit
        ref="categoryEdit"
        :show-dialog.sync="showDialog"
        @updateList="getCategory"
      />
    </div>
  </div>
</template>

<script>
import categoryEdit from './components/category-edit.vue'
import { category } from '@/api/category' // 获取分类列表的接口
import { delCategory } from '@/api/category' // 获取删除分类接口
import { categoryCount } from '@/api/category' // 获取分类数量 也就是总页码的数量

export default {
  components: {
    categoryEdit
  },
  data() {
    return {
      showDialog: false, // 弹窗的显示隐藏
      categoryList: [], // 分类列表
      curId: null, // 编辑分类id
      pagesize: 5, // 条数
      page: 1, // 页码
      total: 0, // 总数量
      keyword: '', // 输入框搜索
      titleContains: '' // 模糊搜索
    }
  },
  async created() {
    // 调用封装的分类列表函数--渲染分类内容
    await this.getCategory()
  },
  methods: {
    // 封装分类列表--渲染分类内容
    async getCategory() {
      // 声明一个变量计算当前开始获取的下标
      const start = (this.page - 1) * this.pagesize
      // 获取分类列表的接口
      this.categoryList = await category({
        _limit: this.pagesize, // 每页的长度
        _start: start, // 开始的下标
        title_contains: this.titleContains // 模糊搜索title
      })
      // 调用接口获取总total的数量
      this.total = await categoryCount({ title_contains: this.titleContains })
    },
    // 编辑事件
    async editFn(id) {
      // 保存id
      this.curId = id
      // 显示弹窗
      this.showDialog = true
      // 调用子组件的方法操作数据回显
      this.$refs.categoryEdit.getEditCategory(id)
    },

    // 删除事件
    async delFn(id) {
      try {
        // 二次询问框
        await this.$confirm('是否确定要删除?')
        // 调用接口实现删除
        await delCategory(id)
        // 判断当删除最后一页的数据后,防止出现没有数据,我们需要请求上一页的数据
        if (this.page > 1 && this.categoryList.length === 1) {
          this.page--
        }
        // 刷新页面
        this.getCategory()
        // 提示
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error, '删除失败')
      }
    },
    // 点击分页事件
    currentChangeFn(newPage) {
      this.page = newPage
      // 刷新页面 重新渲染分类内容
      this.getCategory()
    },
    // 点击搜索事件
    async searchFn() {
      // console.log(this.keyword)
      this.titleContains = this.keyword
      // 如果是在第二页搜索也能够从第一页开始搜是否有相关的模糊词
      this.page = 1
      // 调用接口重新渲染分类内容
      await this.getCategory()
      // 搜索完后清空
      this.keyword = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.picture {
  width: 150px;
  height: 120px;
  object-fit: contain;
}
</style>
